import './register.css'
import logo1 from '../../assets/logo1.png'
import logo2 from '../../assets/logo2.png'

import React, {Component} from 'react';
import { Form, Input, Button, Card, Select, message } from 'antd';
import PubSub from "pubsub-js";
import axios from "axios";
import {Link} from "react-router-dom";
import memoryUtils from "../../utils/memoryUtils";
import storageUtils from "../../utils/storageUtils";

const { Option } = Select;

const prefixSelector = (
    <Form.Item name="prefix" noStyle>
      <Select style={{ width: 70 }}>
        <Option value="86">+86</Option>
        <Option value="87">+87</Option>
      </Select>
    </Form.Item>
  );

const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 8 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 16 },
    },
};


export default class Register extends Component {

  onFinish = (values) => {
    console.log('Received values of form: ', values);
    let data = {
      username: values.username,
      password: values.password,
      phone: values.phone,
      email: values.email,
    }
    let url = '/registrationapi/register'
    axios.post(url, data, {headers: {'Content-Type': 'application/json'}}
      ).then(res=>{
        if(res.status === 200 && res.data.code === 0){
            message.success('注册成功！')
            // 保存user
            const user = res.data.user
            memoryUtils.user = user
            storageUtils.saveUser(user)
            const flag = true
            PubSub.publish("sendLoginParam", flag)
            this.props.history.push('/index/start/home')
        } else{
            console.log(res)
            message.error('注册失败：' + res.data.msg)
        }
    })
  };

  render() {
    return (
      <div style={{ height:'100%' }} className="register">
        <div className="register-logo">
          <img width={150} src={logo1}/>
          <img width={300} src={logo2}/>
        </div>
        <Card className="register-card" title="智能口腔侧位片配准系统">
          <Form
            {...formItemLayout}
            name="register"
            onFinish={this.onFinish}
            initialValues={{
              prefix: '86',
            }}
            scrollToFirstError
          >

            <Form.Item
              name="username"
              label="用户名"
              rules={[{ required: true, message: '请输入您的用户名！', whitespace: true }]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              name="password"
              label="密码"
              rules={[
                {
                  required: true,
                  message: '请输入您的密码！',
                },
              ]}
              hasFeedback
            >
              <Input.Password />
            </Form.Item>

            <Form.Item
              name="confirm"
              label="确认密码"
              dependencies={['password']}
              hasFeedback
              rules={[
                {
                  required: true,
                  message: '请再一次输入您的密码！',
                },
                ({ getFieldValue }) => ({
                  validator(_, value) {
                    if (!value || getFieldValue('password') === value) {
                      return Promise.resolve();
                    }
                    return Promise.reject(new Error('您两次输入的密码不匹配！'));
                  },
                }),
              ]}
            >
              <Input.Password />
            </Form.Item>

            <Form.Item
              name="phone"
              label="电话号码"
              rules={[{ required: true, message: '请输入您的电话号码！' }]}
            >
              <Input addonBefore={prefixSelector} style={{ width: '100%' }} />
            </Form.Item>

            <Form.Item
              name="email"
              label="电子邮箱"
              rules={[
                {
                  type: 'email',
                  message: '输入的不是有效的电子邮箱！',
                },
                {
                  required: true,
                  message: '请输入您的电子邮箱！',
                },
              ]}
            >
              <Input />
            </Form.Item>

            <Form.Item>
              <Button type="primary" htmlType="submit" className="register-form-button">
                注册
              </Button>
              <a style={{ marginTop: 5 }}>
                <Link to="/login">
                  返回登录
                </Link>
              </a>
            </Form.Item>
          </Form>
        </Card>
      </div>
    );
  }
}

